<template>
	<view class="index_container">


		<view class="flex_box flex_align flex_between flexW mx10">
			<view class="goodsItem mt16" v-for="item in list" @click="getDetail(item)">
				<view class="itembox">
					<view class="goodsItem-banner">
						<image mode="widthFix" :src="item.images[0]"></image>
					</view>
					<view class="goodsItem-skubox">
						<view class="title ellipsis2 fs14 bold">{{item.goods_name}}</view>
						<view class="price mt6">
							<view class="fs12 color_99"></view>
							<view class="mt10 flex_box flex_align flex_between">
								<view class="flex_box flex_align mt3">
									<text class="color1 fs16 bold">￥{{item.spec[0].goods_price}}</text>
									<text class="color2 fs12 ml4">￥{{item.spec[0].line_price}}</text>
								</view>
								<image class="" src="/static/index/add.png" class="addImg"></image>
							</view>
						</view>
					
					</view>
				</view>
			</view>
		</view>

	
	
	</view>
</template>

<script>
	export default {
		data() {
			return {
				storeInfo: {},
				topList: [],
				list: [],
				banner: [],
				uid: 1,
				username: '',
				avatar: '',
				current: 1
			}
		},

		onLoad() {
			
			this.getIndex();
		},


		methods: {

			getDetail(item){
				uni.navigateTo({
					url: './skuDetail?id=' + item.goods_id
				})
			},
			getIndex(){
			
				let param = {
					type:'shop'
				}
				let that = this;
				this.$api.shopIndex(param).then(res => {
					
					if(res.code == 1){
						
						that.list = res.data;
					}else{
						
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #F5F5F5;
	}

	image {
		vertical-align: middle;
	}

	.index_container {
		position: relative;

		.bg {
			position: absolute;
			top: -126rpx;
			left: 0;
			z-index: -1;

			image {
				width: 750rpx;
				height: 100rpx;
			}
		}
	}

	.topbarbg {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1;

		image {
			width: 750rpx;
			height: 150rpx;
		}
	}

	.topbar {
		position: fixed;
		top: 60rpx;
		left: 20rpx;
		display: flex;
		z-index: 2;

		.logo {
			image {
				width: 155rpx;
				height: 77rpx;
			}
		}

		.search {
			background: #ffffff;
			border-radius: 30rpx;
			height: 60rpx;
			margin-left: 68rpx;
			margin-top: 10rpx;
			position: relative;

			icon {
				position: absolute;
				left: 20rpx;
				top: 16rpx;
				font-size: 24rpx;
			}

			input {
				width: 210rpx;
				height: 60rpx;
				line-height: 60rpx;
				padding-left: 60rpx;
				padding-right: 20rpx;
				font-size: 24rpx;
				color: #BFBFBF;
			}
		}
	}

	.userinfo {
		background: $uni-color-primary;
		border: 3rpx solid #F09C53;
		display: flex;
		padding: 20rpx 35rpx;
		margin: 160rpx 20rpx 0 20rpx;
		border-radius: 26rpx;
		overflow: hidden;
		box-sizing: border-box;

		.avatarImg {
			image {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
			}
		}

		.name {
			margin-left: 30rpx;
			flex: auto;

			.shopname {
				font-size: 30rpx;
				color: #FBD21F;
			}

			.shopcontent {
				background: linear-gradient(90deg, #FFD481 0%, #DE160E 100%);
				color: $uni-color-primary;
				font-size: 24rpx;
				padding: 0 20rpx;
				height: 40rpx;
				margin-top: 3rpx;
				line-height: 40rpx;
				border-radius: 10rpx;
			}
		}

		.enjoyicon {
			text-align: center;
			font-size: 24rpx;
			color: #FFFFFF;

			image {
				width: 44rpx;
				height: 44rpx;
			}
		}
	}

	.banner {
		margin: 150rpx 0rpx 0 0rpx;

		image {
			width: 710rpx;
			height: 300rpx;
		}
	}

	.navbar {
		display: flex;

		.navbar-item {
			flex: 1;
			text-align: center;
			color: #1A1614;

			image {
				width: 100rpx;
				height: 100rpx;
			}

		}
	}

	.nianhuo {
		// width: 710rpx;
		// margin: 30rpx auto 20rpx;
		// background: #EB1A12;
		// border-radius: 10rpx;
		// overflow: hidden;

		.nianhuo-bg {
			// image {
			// 	width: 710rpx;
			// 	height: 190rpx;
			// }
		}

		.nianhuo-list {
			// display: flex;
			padding: 20rpx 10rpx;

			.value {
				color: $uni-color-primary;
			}

			.nianhuo-list-item {
				border-radius: 10rpx;
				flex: 1;
				text-align: center;
				margin: 0 10rpx;
				background: #FFFFFF;
				height: 300rpx;

				.img {
					border-radius: 12upx;
					background: #FFF3F3;
					height: 212rpx;
					overflow: hidden;

					image {
						width: 212rpx;
						height: 212rpx;
						border-radius: 12upx;
					}
				}

				.name {
					margin-bottom: 10rpx;
					margin-top: 16rpx;
					font-size: 26rpx;
					color: #1A1A1A;
					max-height: 35rpx;
					text-overflow: ellipsis;
					overflow: hidden;
				}

				.price {
					border-radius: 4rpx;
					overflow: hidden;
					display: flex;
					text-align: center;
					// width: 180rpx;
					margin: 0 20rpx;
					height: 40rpx;
					line-height: 40rpx;
					border: 1rpx solid #EB1A12;

					.label {
						border-radius: 4rpx;
						font-size: 22rpx;
						color: #ffffff;
						background: $uni-color-primary;
						padding: 0 10rpx;
					}

					.value {
						text-align: center;
						padding: 0 10rpx;
						font-size: 24rpx;
						color: $uni-color-primary;
					}
				}
			}
		}
	}

	.tabbox {
		.active {
			position: relative;
			color: #FF351E;
			font-weight: 700;
		}

		.active:after {
			content: '';
			display: inline-block;
			position: absolute;
			left: 0;
			right: 0;
			height: 6upx;
			border-radius: 12upx;
			background-color: #F72813;
			top: 52upx;
		}
	}

	.goodsItem {
		background: #FFFFFF;
		border-radius: 6rpx;
		width: 48%;

		.addImg {
			width: 40upx;
			height: 40upx;
		}

		.goodsItem-top {
			height: 60rpx;
			line-height: 60rpx;

			.left {
				float: left;
				width: 137rpx;
				height: 44rpx;
			}

			.right {
				float: right;
				width: 155rpx;
				height: 33rpx;
			}
		}

		.itembox {
			// border: 1px solid #E7E7E7;
			border-radius: 10rpx;

			.goodsItem-banner {
				width: 100%;
				height: 345rpx;

				image {
					border-radius: 10rpx 10rpx 0 0;
					width: 100%;
					height: 345rpx;
				}
			}

			.goodsItem-skubox {
				background: #FAFAFA;
				padding: 20rpx;
				position: relative;
				border-radius: 0 0 10rpx 10rpx;

				.title {
					color: #1A1A1A;
				}

				.price {

					// image {
					// 	width: 70rpx;
					// 	height: 36rpx;
					// 	margin-right: 10rpx;
					// }
					.color1 {
						color: $uni-color-primary;
					}

					.color2 {
						color: #9A9A9A;
						vertical-align: middle;
						text-decoration: line-through;
						display: inline-block;
					}

				}

				.infolist {
					display: flex;

					.infolist-img {
						margin-right: 30rpx;

						image {
							width: 50rpx;
							height: 50rpx;
							border-radius: 50%;
							margin-right: -10rpx;
						}
					}

					.count {
						vertical-align: middle;
						color: #1A1A1A;
						font-weight: bold;
						margin-top: 7rpx;
						font-size: 24rpx;
					}
				}

				.skubox-right {
					position: absolute;
					right: 20rpx;
					top: 100rpx;

					.count {
						background: #FBE1E0;
						color: #EB1A12;
						font-size: 24rpx;
						text-align: center;
						border-radius: 4rpx 4rpx 0 0;
						padding: 5rpx 10rpx;
					}

					.btn {
						button {
							width: 150rpx;
							height: 48rpx;
							line-height: 48rpx;
							text-align: center;
							background: #EB1A12;
							border-radius: 10rpx;
							font-size: 24rpx;
							color: #ffffff;
						}

						button::after {
							border: none;
						}
					}

					.btn2 {
						button {
							background: #D9D6D6;
							color: #FFFFFF;
						}
					}
				}
			}
		}

	}

	.sroll-top {
		position: fixed;
		bottom: 50rpx;
		right: 40rpx;

		image {
			width: 75rpx;
			height: 75rpx;
		}
	}

	.bottom {
		font-size: 24rpx;
		color: #9A9A9A;
		text-align: center;
		height: 100rpx;
		line-height: 100rpx;
	}
</style>
